<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Examples of Columns - For more info visit: www.elasticss.com</title>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
		<link rel="stylesheet" type="text/css" media="all" href="../production/elastic.css" />
		<script src="../jquery.js" type="text/javascript" language="javascript" charset="utf-8"></script>
		<script src="../production/elastic.js" type="text/javascript" language="javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" media="all" href="images&css/css_for_demo_files.css" />
	</head>
	<body>
		<div class="header-demo">
			<a href="http://elasticss.com"><img src="images&css/demo_header.png" /></a>
		</div>
		<div class="unit">
			<div class="container" style="padding:0;margin:0;border:0;width:80%;margin:0 auto; ">
				<h1>Elastic CSS Framework Columns Examples</h1>
				<p>Elastic provides a complete system for complex layouts, explaining every combination in detail takes many lines, and sometimes there are several solutions to accomplish the same results.</p>
				<p><strong>This examples only scratch the surface of the capabilities of the framework</strong>, but will put you on the right track and open your mind to play with the elastic syntax and accomplish all your needs fast. Also remember you can nest this samples to accomplish even more combinations.</p>
			</div>
		</div>
		<div class="info">
			Example of a single column. (If you are having one single column it is better to use a "unit" instead.)
		</div>
		<div class="columns">
			<div class="container">
				<div class="column">
					<div class="container">column</div>
				</div>
			</div>
		</div>
		<div class="info">
			Examples of on-2, on-3, on-4 & on-5 columns.
		</div>
		<div class="columns on-2">
			<div class="container">
				<div class="column">
					<div class="container">column 1</div>
				</div>
				<div class="column">
					<div class="container">column 2</div>
				</div>
			</div>
		</div>
		<div class="columns on-3">
			<div class="container">
				<div class="column">
					<div class="container">column 1</div>
				</div>
				<div class="column">
					<div class="container">column 2</div>
				</div>
				<div class="column">
					<div class="container">column 3</div>
				</div>
			</div>
		</div>
		<div class="columns on-4">
			<div class="container">
				<div class="column">
					<div class="container">column 1</div>
				</div>
				<div class="column">
					<div class="container">column 2</div>
				</div>
				<div class="column">
					<div class="container">column 3</div>
				</div>
				<div class="column">
					<div class="container">column 4</div>
				</div>
			</div>
		</div>
		<div class="columns on-5">
			<div class="container">
				<div class="column">
					<div class="container">column 1</div>
				</div>
				<div class="column">
					<div class="container">column 2</div>
				</div>
				<div class="column">
					<div class="container">column 3</div>
				</div>
				<div class="column">
					<div class="container">column 4</div>
				</div>
				<div class="column">
					<div class="container">column 5</div>
				</div>
			</div>
		</div>
		<div class="info">
			Example of a 2 columns, 3 columns, 4 columns, and 5 columns without specifying the "on-#".
		</div>
		<div class="columns">
			<div class="container">
				<div class="column">
					<div class="container">column 1</div>
				</div>
				<div class="column">
					<div class="container">column 2</div>
				</div>
			</div>
		</div>
		<div class="columns">
			<div class="container">
				<div class="column">
					<div class="container">column 1</div>
				</div>
				<div class="column">
					<div class="container">column 2</div>
				</div>
				<div class="column">
					<div class="container">column 3</div>
				</div>
			</div>
		</div>
		<div class="columns">
			<div class="container">
				<div class="column">
					<div class="container">column 1</div>
				</div>
				<div class="column">
					<div class="container">column 2</div>
				</div>
				<div class="column">
					<div class="container">column 3</div>
				</div>
				<div class="column">
					<div class="container">column 4</div>
				</div>
			</div>
		</div>
		<div class="columns">
			<div class="container">
				<div class="column">
					<div class="container">column 1</div>
				</div>
				<div class="column">
					<div class="container">column 2</div>
				</div>
				<div class="column">
					<div class="container">column 3</div>
				</div>
				<div class="column">
					<div class="container">column 4</div>
				</div>
				<div class="column">
					<div class="container">column 5</div>
				</div>
			</div>
		</div>
		<div class="info">
			Example of a multi columns usage without specifying the "on-#".
		</div>
		<div class="columns">
			<div class="container">
				<div class="column">
					<div class="container">column 1</div>
				</div>
				<div class="column">
					<div class="container">column 2</div>
				</div>
				<div class="column">
					<div class="container">column 3</div>
				</div>
				<div class="column">
					<div class="container">column 4</div>
				</div>
				<div class="column">
					<div class="container">column 5</div>
				</div>
				<div class="column">
					<div class="container">column 6</div>
				</div>
				<div class="column">
					<div class="container">column 7</div>
				</div>
				<div class="column">
					<div class="container">column 8</div>
				</div>
				<div class="column">
					<div class="container">column 9</div>
				</div>
				<div class="column">
					<div class="container">column 10</div>
				</div>
				<div class="column">
					<div class="container">column 11</div>
				</div>
				<div class="column">
					<div class="container">column 12</div>
				</div>
				<div class="column">
					<div class="container">column 13</div>
				</div>
			</div>
		</div>
		<div class="info">
			Example of what happens when you super-charge a "columns on-10" with 26 columns.
		</div>
		<div class="columns on-10">
			<div class="container">
				<div class="column">
					<div class="container">column 1</div>
				</div>
				<div class="column">
					<div class="container">column 2</div>
				</div>
				<div class="column">
					<div class="container">column 3</div>
				</div>
				<div class="column">
					<div class="container">column 4</div>
				</div>
				<div class="column">
					<div class="container">column 5</div>
				</div>
				<div class="column">
					<div class="container">column 6</div>
				</div>
				<div class="column">
					<div class="container">column 7</div>
				</div>
				<div class="column">
					<div class="container">column 8</div>
				</div>
				<div class="column">
					<div class="container">column 9</div>
				</div>
				<div class="column">
					<div class="container">column 10</div>
				</div>
				<div class="column">
					<div class="container">column 11</div>
				</div>
				<div class="column">
					<div class="container">column 12</div>
				</div>
				<div class="column">
					<div class="container">column 13</div>
				</div>
				<div class="column">
					<div class="container">column 14</div>
				</div>
				<div class="column">
					<div class="container">column 15</div>
				</div>
				<div class="column">
					<div class="container">column 16</div>
				</div>
				<div class="column">
					<div class="container">column 17</div>
				</div>
				<div class="column">
					<div class="container">column 18</div>
				</div>
				<div class="column">
					<div class="container">column 19</div>
				</div>
				<div class="column">
					<div class="container">column 20</div>
				</div>
				<div class="column">
					<div class="container">column 21</div>
				</div>
				<div class="column">
					<div class="container">column 22</div>
				</div>
				<div class="column">
					<div class="container">column 23</div>
				</div>
				<div class="column">
					<div class="container">column 24</div>
				</div>
				<div class="column">
					<div class="container">column 25</div>
				</div>
				<div class="column">
					<div class="container">column 26</div>
				</div>
			</div>
		</div>
		<div class="info">
			Example of calendar. Using a "columns on-7" and super-charging it 7 colums for the day's name and other 30 columns for the days.
		</div>
		<div class="columns on-7">
			<div class="container">
				<div class="column">
					<div class="container"><strong>Monday</strong></div>
				</div>
				<div class="column">
					<div class="container"><strong>Tuesday</strong></div>
				</div>
				<div class="column">
					<div class="container"><strong>Wednesday</strong></div>
				</div>
				<div class="column">
					<div class="container"><strong>Thursday</strong></div>
				</div>
				<div class="column">
					<div class="container"><strong>Friday</strong></div>
				</div>
				<div class="column">
					<div class="container"><strong>Saturday</strong></div>
				</div>
				<div class="column">
					<div class="container"><strong>Sunday</strong></div>
				</div>
				<div class="column">
					<div class="container">day 1</div>
				</div>
				<div class="column">
					<div class="container">day 2</div>
				</div>
				<div class="column">
					<div class="container">day 3</div>
				</div>
				<div class="column">
					<div class="container">day 4</div>
				</div>
				<div class="column">
					<div class="container">day 5</div>
				</div>
				<div class="column">
					<div class="container">day 6</div>
				</div>
				<div class="column">
					<div class="container">day 7</div>
				</div>
				<div class="column">
					<div class="container">day 8</div>
				</div>
				<div class="column">
					<div class="container">day 9</div>
				</div>
				<div class="column">
					<div class="container">day 10</div>
				</div>
				<div class="column">
					<div class="container">day 11</div>
				</div>
				<div class="column">
					<div class="container">day 12</div>
				</div>
				<div class="column">
					<div class="container">day 13</div>
				</div>
				<div class="column">
					<div class="container">day 14</div>
				</div>
				<div class="column">
					<div class="container">day 15</div>
				</div>
				<div class="column">
					<div class="container">day 16</div>
				</div>
				<div class="column">
					<div class="container">day 17</div>
				</div>
				<div class="column">
					<div class="container">day 18</div>
				</div>
				<div class="column">
					<div class="container">day 19</div>
				</div>
				<div class="column">
					<div class="container">day 20</div>
				</div>
				<div class="column">
					<div class="container">day 21</div>
				</div>
				<div class="column">
					<div class="container">day 22</div>
				</div>
				<div class="column">
					<div class="container">day 23</div>
				</div>
				<div class="column">
					<div class="container">day 24</div>
				</div>
				<div class="column">
					<div class="container">day 25</div>
				</div>
				<div class="column">
					<div class="container">day 26</div>
				</div>
				<div class="column">
					<div class="container">day 27</div>
				</div>
				<div class="column">
					<div class="container">day 28</div>
				</div>
				<div class="column">
					<div class="container">day 29</div>
				</div>
				<div class="column">
					<div class="container">day 30</div>
				</div>
			</div>
		</div>
		<div class="info">
			Same example of the calendar but now inside a "columns on-2".
		</div>
		<div class="on-2 columns">
			<div class="container" style="">
				<div class="column">
					<div class="container">I'm a column inside of a "columns on-2" so my width is the 50% of my parent.</div>
				</div>
				<div class="column columns on-7">
					<div class="container">
						<div class="column">
							<div class="container"><strong>Monday</strong></div>
						</div>
						<div class="column">
							<div class="container"><strong>Tuesday</strong></div>
						</div>
						<div class="column">
							<div class="container"><strong>Wednesday</strong></div>
						</div>
						<div class="column">
							<div class="container"><strong>Thursday</strong></div>
						</div>
						<div class="column">
							<div class="container"><strong>Friday</strong></div>
						</div>
						<div class="column">
							<div class="container"><strong>Saturday</strong></div>
						</div>
						<div class="column">
							<div class="container"><strong>Sunday</strong></div>
						</div>
						<div class="column">
							<div class="container">day 1</div>
						</div>
						<div class="column">
							<div class="container">day 2</div>
						</div>
						<div class="column">
							<div class="container">day 3</div>
						</div>
						<div class="column">
							<div class="container">day 4</div>
						</div>
						<div class="column">
							<div class="container">day 5</div>
						</div>
						<div class="column">
							<div class="container">day 6</div>
						</div>
						<div class="column">
							<div class="container">day 7</div>
						</div>
						<div class="column">
							<div class="container">day 8</div>
						</div>
						<div class="column">
							<div class="container">day 9</div>
						</div>
						<div class="column">
							<div class="container">day 10</div>
						</div>
						<div class="column">
							<div class="container">day 11</div>
						</div>
						<div class="column">
							<div class="container">day 12</div>
						</div>
						<div class="column">
							<div class="container">day 13</div>
						</div>
						<div class="column">
							<div class="container">day 14</div>
						</div>
						<div class="column">
							<div class="container">day 15</div>
						</div>
						<div class="column">
							<div class="container">day 16</div>
						</div>
						<div class="column">
							<div class="container">day 17</div>
						</div>
						<div class="column">
							<div class="container">day 18</div>
						</div>
						<div class="column">
							<div class="container">day 19</div>
						</div>
						<div class="column">
							<div class="container">day 20</div>
						</div>
						<div class="column">
							<div class="container">day 21</div>
						</div>
						<div class="column">
							<div class="container">day 22</div>
						</div>
						<div class="column">
							<div class="container">day 23</div>
						</div>
						<div class="column">
							<div class="container">day 24</div>
						</div>
						<div class="column">
							<div class="container">day 25</div>
						</div>
						<div class="column">
							<div class="container">day 26</div>
						</div>
						<div class="column">
							<div class="container">day 27</div>
						</div>
						<div class="column">
							<div class="container">day 28</div>
						</div>
						<div class="column">
							<div class="container">day 29</div>
						</div>
						<div class="column">
							<div class="container">day 30</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="info">
			Example of the use of "span-#" inside a "columns on-3" with a lot of columns to see alot of cases.
		</div>
		<div class="columns on-3">
			<div class="container">
				<div class="column span-2">
					<div class="container">column with "span-2". Width:66%</div>
				</div>
				<div class="column">
					<div class="container">simple column</div>
				</div>
				<div class="column">
					<div class="container">simple column</div>
				</div>
				<div class="column span-2">
					<div class="container">column with "span-2". Width:66%</div>
				</div>
				<div class="column span-2">
					<div class="container">column with "span-2". Width:66%</div>
				</div>
				<div class="column">
					<div class="container">simple column</div>
				</div>
				<div class="column">
					<div class="container">simple column</div>
				</div>
				<div class="column span-2">
					<div class="container">column with "span-2". Width:66%</div>
				</div>
				<div class="column span-3">
					<div class="container">column with "span-3". Width:100%</div>
				</div>
				<div class="column">
					<div class="container">simple column</div>
				</div>
				<div class="column">
					<div class="container">simple column</div>
				</div>
				<div class="column">
					<div class="container">simple column</div>
				</div>
				<div class="column span-4">
					<div class="container">column with "span-4". Width:100%</div>
				</div>
				<div class="column">
					<div class="container">simple column</div>
				</div>
				<div class="column">
					<div class="container">simple column</div>
				</div>
				<div class="column">
					<div class="container">simple column</div>
				</div>
			</div>
		</div>
		<div class="info">
			Example of a set of columns with "Lorem Ipsum" Text. (Some columns are using the full-height helper so that they can have the same height of it parent.)
		</div>
		<div class="columns on-4">
			<div class="container">
				<div class="column span-3">
					<div class="container">
						<div class="columns on-2">
						  	<div class="container" style="">
						    	<div class="column">
						    	  	<div class="container" style="">
						    	    	<p><strong>Simple Column - Inside a "columns on-2"</strong></p>
				    					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
						    	  	</div>
						    	</div>
						    	<div class="column">
						    	  	<div class="container" style="">
						    	    	<p><strong>Simple Column - Inside a "columns on-2"</strong></p>
				    					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
						    	  	</div>
						    	</div>
						  	</div>
						</div>
						<div class="columns on-3">
						  	<div class="container" style="">
						    	<div class="column">
						    	  	<div class="container" style="">
						    	    	<p><strong>Simple Column - Inside a "columns on-3"</strong></p>
				    					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
						    	  	</div>
						    	</div>
						    	<div class="column">
						    	  	<div class="container" style="">
						    	    	<p><strong>Simple Column - Inside a "columns on-3"</strong></p>
				    					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
						    	  	</div>
						    	</div>
						    	<div class="column">
						    	  	<div class="container" style="">
						    	    	<p><strong>Simple Column - Inside a "columns on-3"</strong></p>
				    					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
						    	  	</div>
						    	</div>
						  	</div>
						</div>
					</div>
				</div>
				<div class="column full-height">
				  	<div class="container full-height">
					    <p><strong>Simple Column</strong></p>
					    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
					    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum in voluptate velit esse cillum dolore eu fugiat.</p>
				  	</div>
				</div>
			</div>
		</div>
		<div class="columns on-4">
		  	<div class="container" style="">
		    	<div class="column full-height">
		    	  	<div class="container full-height" style="">
		    	    	<p><strong>Simple Column - Inside a "columns on-4"</strong></p>
    					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		    	  	</div>
		    	</div>
		    	<div class="column span-2 full-height">
		    	  	<div class="container full-height" style="">
		    	    	<p><strong>Column with "span-2" - Inside a "columns on-4"</strong></p>
    					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		    	  	</div>
		    	</div>
		    	<div class="column full-height">
		    	  	<div class="container full-height" style="">
		    	    	<p><strong>Simple Column - Inside a "columns on-4"</strong></p>
    					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		    	  	</div>
		    	</div>
		  	</div>
		</div>
		<div class="info">
			All the examples above are simple cases that only uses the "columns on-#", "column span-#" of the clases of the Elastic CSS Framework. <br /><br />
			For more examples and tutorials please look at the other demo files or watch more tutorials at <a style="color:#FFF;"href="http://www.elasticss.com/">elasticss.com</a>
		</div>
	</body>
</html>
